<!DOCTYPE html>
<html>
<head>
  <title>梧州龟苓膏</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
  ul.nav-pills {
      top: 70px;
      left: 40px;
      position: fixed ;
  }
  div.int div {
      height: 500px;
  }
  nav{
     background-image: url('image/hdl/img13.jpeg');
  }
   .ong{
     background-image: url('image/hdl/img14.jpeg');
  }
  </style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
  <!-- 导航栏 -->
  <nav class="navbar navbar-expand-md bg-dark  fixed-top">
    <a class="navbar-brand" href="#"><i class="bi bi-house"></i>首页</a>
    <button class="navbar-toggler btn-primary active" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>  
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav ">
        <li class="nav-item">
          <a class="nav-link" href="hdl_1.html">广西梧州</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="food.html">广西河池</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">广西桂林</a>
        </li> 
        <li class="nav-item">
          <a class="nav-link" href="#">广西</a>
        </li> 
      </ul>
    </div>
  </nav>
</div>
</div> 
</div>

  <div class="container-fluid">
    <div class="row">
    <nav class="col-sm-3 " id="myScrollspy">
      <!-- 滚动监听 -->
      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#section1">顶部</a>
        </li>
        <li class="nav-item">
          <a class="nav-link " href="#section2">龟苓膏的介绍</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section3">龟苓膏的做法</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#section4">龟苓膏的历史民俗</a>
        </li>
        <br><br>
        <p>欢迎了解</p>
        <h1>梧州龟苓膏</h1>
      </ul>
    </nav>
    <div class="col-sm-9 ong">
      <div id="section1" >    
        <div id="demo" class="carousel slide " data-ride="carousel" data-interval="2000">
          <!-- 指示符 -->
          <ul class="carousel-indicators">
            <li data-target="#demo" data-slide-to="0" class="active"></li>
            <li data-target="#demo" data-slide-to="1"></li>
            <li data-target="#demo" data-slide-to="2"></li>
          </ul>
         
          <!-- 轮播图片 -->
          <div class="carousel-inner " >
            <div class="carousel-item active">
              <img src="image/hdl/img12.jpeg" style="width: 1400px; height: 600px;" class="img-fluid"  >
            </div>
            <div class="carousel-item">
              <img src="image/hdl/img6.jpeg" style="width: 1400px; height: 600px;" class="img-fluid"  >
            </div>
            <div class="carousel-item">
              <img src="image/hdl/img4.jpeg" style="width: 1400px; height: 600px;" class="img-fluid" >
            </div>
          </div>
         
          <!-- 左右切换按钮 -->
          <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </a>
          <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
          </a>
        </div>
      </div>
      <!-- 龟苓膏的介绍 -->
      <div id="section2" > 
        <h1 style="color:indigo; text-align: center;">龟苓膏的介绍</h1>
        <img src="image/hdl/img6.jpeg" alt="" width="500px" height="350px" class="img-fluid">
        <p><i class="bi bi-record-circle" style="color: red;"></i>梧州龟苓膏，广西壮族自治区梧州市特产，中国国家地理标志产品。是历史悠久的梧州传统药膳，相传最初是清宫中专供皇帝食用的名贵药物，它主要以鹰嘴龟和土茯苓为原料，再配生地等药物精制而成。
          其性温和，具有清热去湿、滋阴补肾、养颜提神等功效，因而备受两广一带以及东南亚人的喜爱，并畅销中外。</p>
      </div>    
      <!-- 苓龟膏的做法     -->
      <div id="section3" >         
        <h1 style="color: indigo; text-align: center;">苓龟膏的做法</h1>
        <div class="container">
            <img src="image/hdl/img9.jpeg" alt="" width="300px" height="300px" class="img-Thumbnail img-fluid">
            <img src="image/hdl/img5.jpeg" alt="" width="300px" height="300px" class="img-Thumbnail img-fluid">
            <img src="image/hdl/img10.jpeg" alt="" width="300px" height="300px" class="img-Thumbnail img-fluid">
            <a href="https://www.sohu.com/a/478205315_121177553"><h3 style="text-align: center;color: #df2544;">梧州龟苓膏的家常做法</h3></a>
         </div>
      </div>
      <!-- 龟苓膏的历史民俗 -->
      <div id="section4" >
        <div>
        <h1 style="color: indigo; text-align: center;">龟苓膏的历史民俗</h1>
        <img src="image/hdl/img2.jpeg" alt="" width="500px" height="350px" class="img-fluid"><img src="image/hdl/img3.jpeg" alt="" width="500px" height="350px" class="img-fluid">
        <a href="https://www.sohu.com/a/397652502_120054950"><h3 style="text-align: center;color: #df2544;">龟苓膏的历史传奇</h3></a>
        <p><i class="bi bi-record-circle" style="color: red;"></i>广西梧州古称苍梧郡。公元3世纪时（三国时），蜀汉皇帝刘备新丧，南方诸郡的土着趁机起兵叛变。蜀国丞相诸葛亮亲自出马平乱。诸葛亮南征时驻军于苍梧郡，当时蜀军将士多为北方人，初到南方水土不服，大多数将士上吐下泻，严重影响战斗力。诸葛亮很着急，急忙找来当地人问个究竟。当地人说，梧州气候湿热、多雾（古称瘴气），
          于是便献上妙方，以当地特产乌龟、土茯苓熬汤饮用。诸葛亮令军士一试，果然功效如神，大部分将士痊愈。</p>
      </div>      
    </div>
  </div>
</div> 
</body>
</html>